<div class="row">
    <div class="col-sm-6">
        <div class="header subgroupHeader">Risk Rating Distribution</div>
        <div ratingDistributionChart *ngIf="benchmarkData && displayRatingDistribution" [chartID]="'benchmarkchart'" [chartData]="benchmarkData"
            [companyName]="currentCompanyName" [showRiskLevels]="true" [riskLevels]="riskClusters" [companyRiskLevel]="companyClusterCode"
            [primaryName]="primaryName" [secondaryName]="secondaryName" style="padding:0px; margin-bottom: 40px;">
            <div id='benchmarkchart' style="height:310px;"></div>
            <div id='benchmarkChartAxis' style="height: 25px; margin-top: 0px;"></div>
        </div>

        <div benchmarkChart *ngIf="benchmarkData && !displayRatingDistribution" [chartID]="'benchmarkchart'" [chartData]="benchmarkData"
            [companyName]="currentCompanyName" [showRiskLevels]="true" [riskLevels]="riskClusters" [companyRiskLevel]="companyClusterCode"
            [primaryName]="primaryName" [secondaryName]="secondaryName" style="padding:0px; margin-bottom: 40px;">
            <div id='benchmarkchart' style="height:310px;"></div>
            <div id='benchmarkChartAxis' style="height: 25px; margin-top: 0px;"></div>
        </div>

        <table *ngIf="universe && subIndustry" class="table table-condensed">
            <thead>
                <tr>
                    <th class="col-sm-4">&nbsp;</th>
                    <th class="col-sm-5">Position</th>
                    <th class="col-sm-3">Percentile</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="chart-legend-block" style="background-color: #A7A9AC;">&nbsp;</div> Universe
                    </td>
                    <td>
                        <strong>{{universe.performance.rank}}</strong> out of {{universe.performance.count}}</td>
                    <td>
                        <strong>{{formatRank(universe.performance.percentile)}}</strong>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="chart-legend-block" style="background-color: #F0AB01;">&nbsp;</div> Subindustry
                    </td>
                    <td>
                        <strong>{{subIndustry.performance.rank}}</strong> out of {{subIndustry.performance.count}}</td>
                    <td>
                        <strong>{{formatRank(subIndustry.performance.percentile)}}</strong>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>

    <div class="col-sm-6">
        <div class="header subgroupHeader">Subindustry Exposure/Management</div>
        <div scatterChart *ngIf="exposureData && subIndustry" [chartID]="'scatterchart'" [currentCompany]="currentCompany" [chartData]="exposureData"
            [riskLevels]="riskClusters" [maxExposure]="maxExposure" [peersList]="subIndustry.peersList">
            <div id="scatterchart" style="height:360px;"></div>
        </div>

        <div class="text-center" style="margin-top: 30px;">
            <div class="chart-legend-circle" style="background-color: #F0AB01;">&nbsp;</div> Subindustry &nbsp;&nbsp;&nbsp;
            <div class="chart-legend-circle" style="background-color: #000000;">&nbsp;</div> Company
        </div>
    </div>
</div>